<template>
  <div >
    <div id="toPrint">
      <div class="box">
        <h1>惠州市申报博士津贴汇审核表</h1>
        <div><br><br></div>
        <table  class="table" align="center" valign="center" border="1">
          <tr class="head">
            <td width="40px">
              序<br>号
            </td>
            <td width="70px">
              姓名
            </td>
            <td width="36px">
              性<br>别
            </td>
            <td width="250px">
              现工作单位及职务
            </td>
            <td width="150px">
              联系手机
            </td>
            <td width="70px">
              申报<br>月数
            </td>
            <td width="100px">
              申报<br>金额
            </td>
            <td width="110px">
              到惠时间
            </td>
            <td width="110px">
              备注<br>（请注明在岗/何<br>时何因离惠//新<br>增）
            </td>
            <td width="110px">
              状态
            </td>
            <td>
              操作
            </td>
            <td>
              操作
            </td>
          </tr>

          <tr class="body" v-for="item in items">
            <td>{{ item.id }}</td>
            <td>{{ item.reName }}</td>
            <td>{{ item.sex }}</td>
            <td>{{ item.workUnitAndProfession }}</td>
            <td>{{ item.phone }}</td>
            <td>{{ item.nowDiffMonth }}</td>
            <td>{{ item.smallMoney }}</td>
            <td>{{ item.reTime }}</td>
            <td></td>

            <td>{{status[item.id-1].st}}</td>



            <td>
              <el-popconfirm
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="你确定通过这条信息吗？"
              @confirm="pass(item.id)"
            >
              <el-button type="success" icon="el-icon-edit"  slot="reference" >通过</el-button>

            </el-popconfirm>

            </td>
            <td>
              <el-popconfirm
                confirm-button-text='确定'
                cancel-button-text='取消'
                icon="el-icon-info"
                icon-color="red"
                title="你确定退回这条信息吗？"
                @confirm="rollBack(item.id)"
              >
                <el-button type="primary" icon="el-icon-edit"  slot="reference">退回</el-button>

              </el-popconfirm></td>

          </tr>


        </table>

      </div>
    </div>


  </div>
</template>

<script>
import {post, get, objectPost} from "../common/serviceUtil";
export default {
  name: "personalTable",

  data(){
    return{
      status: [],
      items:[],
      index:0,
      nub:0,
    }
  },
  beforeCreate() {

    get("/page/selectAll").then(res=>{
      this.items = res.data.data
      this.nub = this.items.length
      for(let i=0;i<this.items.length;i++){
        this.items[i].id = i+1 ;
        if (this.items[i].reStatus === "1") {
          this.status.push({st:"通过"})
        }else if (this.items[i].reStatus == "2"){
          this.status.push({st:"待审核"})
        }else {
          this.status.push({st: "驳回"})
        }
      }
    })

  },
  methods:{
    pass(id) {

      this.items[id-1].reStatus = 1
      this.submit(this.items[id-1])
    },
    rollBack(id) {
        this.items[id-1].reStatus = 3  // 0 未提交  1 通过   2 待审核  3 驳回
        this.submit(this.items[id-1])
    },
    submit(obj) {
      objectPost("/page/updateStatus",obj).then(res=>{
         if (res.data.status==1) {

           if (obj.reStatus == "1") {
             this.status[obj.id-1].st = "通过"

           }else if (obj.reStatus == "2") {
             this.status[obj.id-1].st = "待审核"
           }else if (obj.reStatus == "3"){
             this.status[obj.id-1].st = "驳回"
           }
         }
      })
    },
    prints(){
      var prints = document.getElementById('toPrint')
    },
    getIndex(){
      return index++
    }
  }
}


</script>

<style scoped>
.box{

}
.table{
  border-collapse: collapse;
  border-spacing: 0;

  display: table;
  width: 100%;
  max-width: 1000px;
  min-width: 1000px;
  margin:0 auto;
  border:  black;
}
.top-form{
  height: 80px;
}
.head>td{
  height: 80px;
}
.body>td{
  height: 40px;
}
.top-right{
  font-size: 22px;
  text-align: left;
}
.top-left{
  width: 100px;
}
.foot{
  text-align: left;
  border: 0px white;
  font-size: 20px;
}
</style>
